<template>
  <div class="album">
    <div class="desc">
      <div class="left"><img v-lazy="album.picUrl" alt=""></div>
      <div class="right">
        <span class="tag_title">专辑</span>
        <div class="title">{{album.name}}</div>
        <div class="operate">
          <div class="play">
            <img src="~@/assets/img/songlistdetail/play.svg" alt="">
            <span @click="playAll">播放全部</span>
          </div>
          <div class="collect">
            <img src="~@/assets/img/songlistdetail/collect.svg" alt="">
            <span>收藏({{likedCount}})</span>
          </div>
          <div class="share">
            <img src="~@/assets/img/songlistdetail/share.svg" alt="">
            <span>分享({{shareCount}})</span>
          </div>
          <div class="download">
            <img src="~@/assets/img/songlistdetail/download.svg" alt="">
            <span>下载全部</span>
          </div>
        </div>
          <div v-if="album.artists" class="singer">歌手: <span style="color: #5070d0">{{album.artists[0].name}}</span></div>
          <div class="time">时间: {{showDate}}</div>
      </div>
    </div>
    <div class="footer">
      <NavBarItem :link="'/album/song/id='+album.id">歌曲列表</NavBarItem>
      <NavBarItem v-if="album.info" :link="'/album/comment/id='+album.id">评论({{album.info.commentCount}})</NavBarItem>
      <NavBarItem :link="'/album/describe/id='+album.id">专辑详情</NavBarItem>
    </div>
    <!--      路由映射-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <keep-alive>
      <router-view v-if="!$route.meta.keepAlive"/>
    </keep-alive>
  </div>
</template>

<script>
  import NavBarItem from "@/components/content/navbar/NavBarItem";

  import {formatDate} from '@/components/common/utilis'
  import {home} from "@/network/home";

  export default {
    name: "Album",
    components:{
      NavBarItem,
    },
    data(){
      return{
        album:{}, //专辑描述数据
      }
    },
    computed:{
      showDate(){
        //1.将时间戳转成Date对象
        const date = new Date(this.album.publishTime)
        //2.将date进行格式化
        return formatDate(date, 'yyyy-MM-dd')
      },
      likedCount(){
        return this.album.info ? this.album.info.likedCount : 0
      },
      shareCount(){
        return this.album.info ? this.album.info.shareCount : 0
      },
    },
    created() {
      // 获取专辑数据
      this.getAlbum(this.$route.params.id)
    },
    methods:{
      //获取专辑数据的函数
      getAlbum(id){
        home.getSingerAlbumSongs(id).then(res => {
          this.album = res.data.album
        })
      },
      //播放全部歌曲
      playAll(){
        this.$bus.$emit('playAllAlbum')
      },
    },
  }
</script>

<style scoped>
/*主盒子*/
.album{
  position: fixed;
  top: 45px;
  left: 137px;
  bottom: 50px;
  right: 0;
  padding: 10px 20px;
  background-color: #FFFFFF;
}
.desc{
  padding: 15px 20px;
  display: flex;
}
.left{
  width: 180px;
  height: 180px;
}
.left img{
  width: 100%;
  border-radius: 4px;
}
.right{
  padding: 0 40px;
}
.right .tag_title{
  position: absolute;
  top: 33px;
  padding: 2px 4px;
  font-size: 12px;
  border-radius: 3px;
  color: #ff5777;
  border: 1px solid #ec3f60;
}
.right .title{
  padding: 6px 40px;
  font-size: 21px;
  font-weight: 600;
  color: #222222;
}
.right .operate{
  display: flex;
}
.right .operate>div{
  margin:6px 8px;
  font-size: 14px;
  color: #2a2727;
  padding: 6px 13px;
  border-radius: 15px;
  cursor: pointer;
  border: 1px solid #c1b8b8;
}
.right .operate>div:hover{
  background-color: rgba(0,0,0,.05);
}
.right .operate .play:hover{
  background-color: rgb(220, 68, 62);
}
.right .operate .play{
  background-color: rgb(253,84,78);
  color: #ffffff;
  border: 1px solid transparent;
  margin-left: 0;
}
.right .operate .play img{
  width: 14px;
  height: 14px;
}
.right .operate img{
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.right .operate span{
  vertical-align: middle;
}
.right .songlist-info>div{
  font-size: 13px;
  line-height: 28px;
}
.right .singer,.time{
  font-size: 13px;
  line-height: 25px;
}
.right .singer{
  margin-top: 10px;
}
/*导航栏*/
.footer{
  display: flex;
}
</style>
